在過程中還有一個小細節可以做優化，一個微小UI細節。
也就是由可能會有"雙擊"的可能異常發生
當用戶單擊“添加到購物車”按鈕時，它會保持“活動”狀態，同時
將商品添加到購物車並向用戶顯示狀態消息。

在上一篇已經使用狀態來顯示一段時間的消息。
感覺就像我們可以使用相同的狀態屬性來禁用按鈕。
在此就來補檢查按鈕上的 disabled 屬性，驗證是否可以將其綁定到相關狀態。

import React, { Component } from 'react';
import Axios from 'axios';

export default class AddToCart extends Component {

    state = {}

    constructor(props) {
        super(props);

        this.onSubmit = this.onSubmit.bind(this);
    }

    async onSubmit(e) {
        e.preventDefault();        
        let request = { productId: this.props.productId };
        let sessionId = localStorage.sessionId;
        if (sessionId) {
            request.sessionId = sessionId;
        }
        let result = await Axios.post('/api/cart', request);
        localStorage.sessionId = result.data.sessionId;
        this.setState({ itemJustAdded: true });
        setTimeout(() => this.setState({ itemJustAdded: false }), 6000);
    }

    render() {
        return <form onSubmit={this.onSubmit}>
            <div className="form-row">
                <div className="form-group">
                    <button disabled={this.state.itemJustAdded} className="btn btn-primary form-control" type="submit">
                        Add to Cart
                    </button>
                </div>
            </div>
            {this.state.itemJustAdded && <span className="alert alert-primary">Item added to cart</span>}
        </form>;
    }

}